		<!-- <title>名创优品官方商城</title>
		<link rel="shortcut icon" type="image/x-icon" href="img/favicon.ico"> -->
		<link rel="stylesheet" type="text/css" href="css/首页css.css"/>

		<!-- 头部 --> 
			<div id="header">
				<div id="header-con">
					<div class="topLeft">
					   <span>名创优品 - 爱生活 爱miniso</span>
					</div>
					<div class="topRight">
						<div class="topLogin">
							<span><a href="login.html">登录</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						  <span><a href="registered.html">注册</a></span>
						</div>
					
						<ul>
						  <li>
							<div>|</div><a href="#" >订单管理</a></li>
						  <li>
							<div>|</div><a href="https://web.jiaxincloud.com/onekey.html?id=zzgxbtd3m2j0bg&amp;appName=mcyp678&amp;appChannel=20008" >在线客服</a></li>
						  <li>
							<div>|</div><a href="#">帮助中心</a></li>
						</ul>      	
					</div>
				</div>
			</div>
		<!-- logo 搜索框 购物车 -->
		
			<div id="first">
				<!-- 1.logo -->
				<div id="logo">
					<a href="first.html"><img src="img/miniso%20%20%20logo.png" ></a>
				</div>
				<!-- 2.搜索框 -->
				<div id="search">
					<div id="search-main">
					<button type="button"></button>
					<input id="input" placeholder="输入关键词寻找宝贝" />
					</div>
					<div id="search-hide">
						<h1 class="x-gray">大家都在搜索</h1>
						<li><a href="">西餐套装</a></li>
						<li><a href="">小夜灯</a></li>
						<li><a href="">多功能便携风扇</a></li>
					</div>
				</div>
				<!-- 3.购物车 -->
				<a href="cart.html"><div id="cart"><!-- 购物车数量 -->
					<div id="total">0</div>
				</div></a>
			</div>
		<!-- 导航栏 -->
			<div  id="nav">
				<!-- 左导航 -->
				<ul id="navLeft">
				<!-- 1. -->
					<li  >
						<a href="first.html" class="first">首页</a>
					</li>
				<!-- 2. -->	
			        <li ><a href="#">夏日好物</a>
					<!-- 二级菜单 -->
						<div class="secMenu" id="summer">
							<div class="x-main">
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/夏日好物/1.jpg">
									</div>
									<p>新品优选</p>
								</div>		
							</div>
						</div>
					</li>
				<!-- 3. -->
					<li><a href="#">系列</a>
					<!-- 二级菜单 -->
						<div class="secMenu" id="series">
							<div class="x-main">
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/系列/1.png">
									</div>
									<p>三丽鸥</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/系列/2.png">
									</div>
									<p>奇奇蒂蒂</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/系列/3.png">
									</div>
									<p>bilibili</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/系列/4.png">
									</div>
									<p>侍神令</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/系列/5.png">
									</div>
									<p>动画《天官赐福》</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/系列/6.png">
									</div>
									<p>中国制造</p>
								</div>
							</div>
						</div>
					</li>
				<!-- 4. -->
					<li><a href="#">居家</a>
					<!-- 二级菜单 -->
						<div class="secMenu" id="family">
							<div class="x-main">
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/居家/1.png">
									</div>
									<p>拖鞋</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/居家/2.png">
									</div>
									<p>清洁保鲜</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/居家/3.png">
									</div>
									<p>家饰</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/居家/4.png">
									</div>
									<p>收纳</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/居家/5.png">
									</div>
									<p>浴室用品</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/居家/6.png">
									</div>
									<p>床品</p>
								</div>
							</div>
						</div>
					</li>
				<!-- 5. -->
					<li><a href="#">杂货</a>
					<!-- 二级菜单 -->
						<div class="secMenu" id="groceries">
							<div class="x-main">
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/杂货/1.png">
									</div>
									<p>雨具</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/杂货/2.png">
									</div>
									<p>零食</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/杂货/3.png">
									</div>
									<p>文具</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/杂货/4.png">
									</div>
									<p>玩具</p>
								</div>
							</div>
						</div>
					</li>
				<!-- 6. -->
					<li><a href="#">美护</a>
					<!-- 二级菜单 -->
						<div class="secMenu" id="beautiful">
							<div class="x-main">
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/美护/1.png">
									</div>
									<p>美妆</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/美护/2.png">
									</div>
									<p>身体护理</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/美护/3.png">
									</div>
									<p>护肤品</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/美护/4.png">
									</div>
									<p>口腔护理</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/美护/5.png">
									</div>
									<p>洗发护发</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/美护/6.png">
									</div>
									<p>美护工具</p>
								</div>
							</div>
						</div>
					</li>
				<!-- 7. -->
					<li><a href="#">出行</a>
					<!-- 二级菜单 -->
						<div class="secMenu" id="trip">
							<div class="x-main">
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/出行/1.png">
									</div>
									<p>旅行用品</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/出行/2.png">
									</div>
									<p>箱包</p>
								</div>
							</div>
						</div>
					</li>
				<!-- 8. -->
					<li><a href="#">电器</a>
					<!-- 二级菜单 -->
						<div class="secMenu" id="electrical">
							<div class="x-main">
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/电器/1.png">
									</div>
									<p>生活电器</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/电器/2.png">
									</div>
									<p>数码</p>
								</div>
							</div>
						</div>
					</li>
					</li>
				<!-- 9. -->
					<li><a href="#">餐厨</a>
					<!-- 二级菜单 -->
						<div class="secMenu" id="meal">
							<div class="x-main">
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/餐厨/1.png">
									</div>
									<p>杯壶</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/餐厨/2.png">
									</div>
									<p>餐具</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/餐厨/3.png">
									</div>
									<p>功能餐具</p>
								</div>
							</div>
						</div>
					</li>
				<!-- 10. -->
					<li><a href="#">服装</a>
					<!-- 二级菜单 -->
						<div class="secMenu" id="clothing">
							<div class="x-main">
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/服装/1.png">
									</div>
									<p>袜子</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/服装/2.png">
									</div>
									<p>丝袜</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/服装/3.png">
									</div>
									<p>配饰</p>
								</div>
								<div class="menuBox" onclick="#">
									<div class="imgbox">
										<img src="img/secMenu/服装/4.png">
									</div>
									<p>内裤</p>
								</div>
							</div>
						</div>
					</li>	
				</ul>
				
			<!-- 右导航 -->
				<ul id="navRight">
					<li><a href="#" class="first">专题</a></li>
					<li><a href="#" class="first">限时特卖</a></li>
				</ul>
		
			</div>
			
		
		
			<!-- 固定导航栏 -->
			<div class="x-floor hide" >
				<div class="x-floatHeader x-whiteBox floatDown" id="HS" >
					<div class="x-main">
						<div class="pic">
							<img src="img/logo2.png">
						</div>
						<ul class="nav" id="topCatMenuHide">
							<li><a href="first.html">首页</a></li>
					<!-- 2. -->
						<li ><a href="#">夏日好物</a></li>
					<!-- 3. -->
						<li><a href="#">系列</a></li>
					<!-- 4. -->
						<li><a href="#">居家</a></li>
					<!-- 5. -->
						<li><a href="#">杂货</a></li>
					<!-- 6. -->
						<li><a href="#">美护</a></li>
					<!-- 7. -->
						<li><a href="#">出行</a></li>
					<!-- 8. -->
						<li><a href="#">电器</a></li>
					<!-- 9. -->
						<li><a href="#">餐厨</a></li>
					<!-- 10. -->
						<li><a href="#">服装</a></li>	
					</ul>
						<div class="newrightnav">
							<div class="login topLogin">
								<span><a href="login.html">登录</a></span>
								<span><a href="registered.html">注册</a></span>
							</div>
							<a href="cart.html"><div class="cart" id="topMinCart">
								<!-- 购物车数量 -->
								<div class="news" id="total2">0</div>
							</div></a>
							
						</div>
					</div>
				</div>
			</div>
<script type="text/javascript" src="js/jQuery.js"></script>
<script type="text/javascript">
	//搜索框
	$("#input").click(function(){
		$("#search-hide").css({display:"block"});
		$("#search-main").css({border:"0.5px solid #999"})
	})
	
	$("#search-hide").mouseleave(function(){
		$(this).css({display:"none"});
	})
	
	$("#input").blur(function(){
		$("#search-main").css({border:"1px solid #ddd"})
	})
	
	//首页点击
	$(".first").click(function(){
		$(this).css({color: "#d9232e",
	    borderbottom: "3px solid #d9232e"})
	})
	
	//鼠标滚动弹出隐藏导航
	$(document).scroll(function onMouseScroll(e){
	    if($(this).scrollTop()>230){
			$(".hide").css({display:"block",top:"0px",position:"sticky"});
		}else{
			$(".hide").css({display:"none"})
		}
	})
	
</script>